<template>
  <a-modal v-model:open="open" title=" " @cancel="handleColse" width="60%" :maskClosable="false">
    <a-row :gutter="8">
      <a-col :span="18">
        <div style="display: flex; color: #a66d29">
          <svg-icon name="team" style="margin-top: 4px" />
          <h4 style="margin-left: 4px; margin-right: 4px">POSITION DETAILS</h4>
        </div>
        <a-form layout="horizontal" :model="formState" ref="formRef">
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('名称')" :label-col="labelCol">
                <a-input v-model:value="formState.name" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('单元')" :label-col="labelCol">
                <a-input v-model:value="formState.buName" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('汇报')" :label-col="labelCol">
                <!-- <a-input v-model:value="formState.reportToName" disabled /> -->
                <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model:value="formState.reportTo" show-search style="width: 100%" :token-separators="[',']"
                  :options="lineManagerOptions" :filter-option="filterOption" :fieldNames="{
                    label: 'name',
                    value: 'id'
                  }" disabled>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('PositionEmail')" :label-col="labelCol">
                <a-input v-model:value="formState.email" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('电话')" :label-col="labelCol">
                <a-input v-model:value="formState.phone" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('等级')" :label-col="labelCol">
                <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ref="select" v-model:value="formState.levelId" disabled>
                  <a-select-option v-for="(item, index) in props.levelList" :value="item.dictData">{{
                    `${item.dictData} - ${item.dictDesc}`
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('类别')" :label-col="labelCol">
                <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ref="select" v-model:value="formState.category" disabled>
                  <a-select-option v-for="(item, index) in props.categoryList" :value="item.dictData">
                    {{ isCn ? item.descZh : isArabic ? item.descAr : item.dictDesc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('岗位人员类型')" :label-col="labelCol">
                <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ref="select" v-model:value="formState.personalType" disabled>
                  <a-select-option v-for="(item, index) in props.positionPersonalTypeList" :value="item.dictData">
                    {{ isCn ? item.descZh : isArabic ? item.descAr : item.dictDesc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('岗位类型')" :label-col="labelCol">
                <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ref="select" v-model:value="formState.positionType" disabled>
                  <a-select-option v-for="(item, index) in props.positionTypeList" :value="item.dictData">
                    {{ isCn ? item.descZh : isArabic ? item.descAr : item.dictDesc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item :label="$t('薪酬水平')" :label-col="labelCol">
                <a-input v-model:value="formState.salaryAmount" disabled />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item :label="$t('薪酬费率')" :label-col="labelCol">
                <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ref="select" v-model:value="formState.salaryRate" disabled>
                  <a-select-option v-for="(item, index) in props.salaryRateList" :value="item.dictData">{{ isCn ?
                    item.descZh : isArabic ? item.descAr : item.dictDesc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item :label="$t('倒班')" :label-col="labelCol">
                <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ref="select" v-model:value="formState.rotation" disabled>
                  <a-select-option v-for="(item, index) in props.rotationList" :value="item.dictData">{{ isCn ?
                    item.descZh : isArabic ? item.descAr : item.dictDesc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item :label="$t('能力')" :label-col="labelCol2">
                <a-textarea v-model:value="formState.capability" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="$t('资格')" :label-col="labelCol2">
                <a-textarea v-model:value="formState.qualification" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="$t('描述')" :label-col="labelCol2">
                <a-textarea v-model:value="formState.description" disabled />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <!-- 步骤条 -->
      <a-col :span="6">
        <div style="display: flex; color: #a66d29">
          <svg-icon name="team" style="margin-top: 4px" />
          <h4 style="margin-left: 4px; margin-right: 4px">
            POSITION REPORT LINE
          </h4>
        </div>
        <div style="background-color: #f6f6f6; padding: 16px 0 0 24px; height: 90%">
          <a-steps direction="vertical">
            <a-step v-for="(item, index) in formState?.reportLineList" :key="index">
              <template #icon>
                <svg-icon v-if="index === 0" name="round" />
                <svg-icon v-else-if="isSteps === item.id" name="truangle-ative" />
                <svg-icon v-else-if="formState.reportLineList.length >= 3" name="triangle" />
              </template>
              <template #title>
                <div :style="{ 'color': isSteps === item.id ? '#676a6c' : '#7f8899' }">
                  <div>{{ isCn ? item.shortNameZh : isArabic ? item.shortNameAr : item.shortNameEn }}</div>
                  <div>{{ item.leaderName || '--' }}</div>
                </div>
              </template>
            </a-step>
          </a-steps>
        </div>
      </a-col>
    </a-row>
    <template #footer>
      <a-button key="back" @click="handleClose">{{ $t("关闭") }}</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { useI18n } from "vue-i18n";
import { GetCodeDict, GetPositionInfo, GetPositionList } from "@/api/organization/index";
import { useLanguage } from "@/hooks/index";
import { CaretUpOutlined } from "@ant-design/icons-vue";
const { t: $t } = useI18n();
const { isEn, isCn, isArabic } = useLanguage();
const props = defineProps({
  levelList: {
    type: Array,
    default: [],
  },
  categoryList: {
    type: Array,
    default: [],
  },
  positionTypeList: {
    type: Array,
    default: [],
  },
  companyId: {
    type: String,
    default: '',
  },
  positionPersonalTypeList: {
    type: Array,
    default: [],
  },
  rotationList: {
    type: Array,
    default: [],
  },
  salaryRateList: {
    type: Array,
    default: [],
  }
});
const labelCol = { span: 6 };
const labelCol2 = { span: 3 };
const formState = ref({
  name: "",
  description: "",
  buId: "",
  buName: "",
  reportTo: '',
  capability: "",
  qualification: "",
  headCount: "",
  email: "",
  phone: "",
  levelId: undefined,
  category: undefined,
  positionType: undefined,
  personalType: undefined,
  salaryAmount: null,
  salaryRate: undefined,
  rotation: undefined,
  reportLineList: null
});

const isSteps = computed(() => {
  let obj = {}
  formState.value.reportLineList.forEach(function (element, index, array) {
    if (index === array.length - 1) {
      // consolelog("This is the last element:", element);
      obj = element
    }
  });
  return obj.id
});
const open = ref(false);
const showModal = async (record) => {
  open.value = true;
  getPositionList()
  if (record?.uuid) {
    getPositionInfo(record.uuid)
  }
};
const getPositionInfo = async (uuid) => {
  const { data } = await GetPositionInfo(uuid)
  formState.value = cloneDeep(data);
  formState.value.buName = isCn.value ? data.buNameZh : isArabic.value ? data.buNameAr : data.buName
  formState.value.levelId = data.levelId ? String(data.levelId) : undefined
  formState.value.category = data.category ? String(data.category) : undefined
  formState.value.positionType = (data.positionType || data.positionType === 0) ? String(data.positionType) : undefined
  formState.value.personalType = (data.personalType || data.personalType === 0) ? String(data.personalType) : undefined
  formState.value.salaryRate = (data.salaryRate || data.salaryRate === 0) ? String(data.salaryRate) : undefined
  formState.value.rotation = (data.rotation || data.rotation === 0) ? String(data.rotation) : undefined
  formState.value.reportTo = Number(data.reportTo) || undefined
}
const lineManagerOptions = ref([])
const getPositionList = async () => {
  const { data } = await GetPositionList({ enterpriseId: props.companyId });
  lineManagerOptions.value = data || []
}
const handleClose = () => {
  open.value = false;
};
defineExpose({
  showModal,
});
</script>
<style lang="scss" scoped>
.ant-modal-content {
  .saveButton {
    background-color: #18a689;
    color: #fff;
  }

  .saveButton:active {
    color: #fff !important;
    border-color: #fff !important;
  }
}

.updateColor {
  color: #ff7a00;
}

::v-deep {
  .ant-form-item .ant-form-item-label>label {
    color: #7f8899;
  }

  .ant-steps .ant-steps-item-title {
    font-size: 12px;
  }

  .ant-steps.ant-steps-vertical>.ant-steps-item .ant-steps-item-title {
    line-height: 16px;
  }

  .ant-steps-item-title {
    display: block;
    margin-top: 8px;
    border-color: #d9d9d9;
  }

  .ant-steps.ant-steps-vertical>.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail {
    top: 20px;
  }

  .ant-steps-item-title-process {
    border-top-style: dashed;
  }

  .ant-steps-item-process .ant-steps-item-title-process {
    border-color: rgba(0, 0, 0, 0.25);
  }

  .ant-steps .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-tail::after {
    color: #ff7a00;
    background-color: #fff;
    border: 0.5px dashed #ff7a00;
  }

  .ant-steps .ant-steps-item-finish.ant-steps-item-custom .ant-steps-item-icon>.ant-steps-icon,
  .ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)>.ant-steps-item-container[role='button']:hover .ant-steps-item-icon .ant-steps-icon,
  .ant-steps .ant-steps-item-process.ant-steps-item-custom .ant-steps-item-icon>.ant-steps-icon {
    color: #ff7a00;
  }

  .ant-steps .ant-steps-item:not(.ant-steps-item-active)>.ant-steps-item-container[role='button']:hover .ant-steps-item-title {
    color: #676a6c;
  }

  .ant-steps.ant-steps-vertical>.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail {
    border: 0.5px dashed #d9d9d9 !important;
  }

  .ant-modal .ant-modal-header {
    margin-bottom: 30px;
  }
}
</style>
